<template>
  <div class="user_right fl ml20">
    <div class="clearfix user_in_top bb1">
      <div class="fl welcome">
        <p class="f18 fw c4448f8">{{userName}}</p>
        <p class="mt15">
          <i id="data_txt">{{dqhourname}}</i>
          ，欢迎来到工流界商城会员中心！
        </p>
        <p class="mt20 line24 c999">您的会员类型是：
          <span class="c333">普通会员</span>
          <span class="auditImg" style="margin-left: 15px;line-height:35px">
            <!-- <img src="../../../assets/img/unauthorized1.png"> -->
          </span>
          <br> 您的服务提供商：
          <span class="c333">工流界供应链(武汉)有限公司</span>
        </p>
        <!-- <div onclick="page.gotoGift()" target="_blank" class="inteScore" style="">
          <span style="color:#fff;font-weight:400;position:absolute;top:26px;left:36px;font-size:17.5px;letter-spacing:1px;">0分</span>
          <span style="color:#fff;font-weight:400;position:absolute;top:71px;left:36px;font-size:17.5px;letter-spacing:2px">未激活
            <div class="jihuoBtn layui-anim-scaleSpring" id="showTip" onmouseenter="page.showActTip()" onmouseleave="page.closeLayerTip()" onclick="page.loadAnInte()">点击激活</div>
          </span>
        </div> -->
      </div>
      <div class="myServers">
        <div class="role role-shangwu" style="padding:20px 25px 0px">
          <div class="title" style="margin-top:23px">
           专属商务
          </div>
          <div class="cnt" style="padding-top: 24px">暂无</div>
        </div>
        <div class="role role-business" style="padding:20px 25px 0px">
          <div class="title" style="margin-top:23px">
            专属业务
          </div>
          <div class="cnt" style="padding-top: 10px;">
            <!-- <ul>
              <li>
                <em style="color:#2c3e50">姓名：</em>
                <span></span>
                </li>
              <li style="margin-right: 114px;
    text-align: center;">
                <em style="color:#2c3e50">联系电话：</em>
                <span></span>
              </li>
            </ul> -->
             <div class="cnt" style="padding-top: 16px">暂无</div>
          </div>
        </div>
      </div>
    </div>

    <div class="user-indexPage-mod user-quickentry">
      <h3 class="user-title">快捷入口</h3>
      <div class="flex list">
      <div class="cell item qrcode">
         <router-link to="/my/order">
         <img src="../../../assets/img/wddd.jpg" alt="">
          <p>我的订单</p>
        </router-link>
      </div>
       <div class="cell item qrcode">
          <router-link to="/my/price">
         <img src="../../../assets/img/xjd.jpg" alt="">
          <p>询价单</p>
        </router-link>
       </div>
     <div class="cell item qrcode">
        <router-link to="/my/history">
         <img src="../../../assets/img/gwls.jpg" alt="">
          <p>购物历史</p>
        </router-link>
     </div>
      <div class="cell item qrcode">
         <router-link to="/my/collect">
         <img src="../../../assets/img/wdsc.jpg" alt="">
          <p>我的收藏</p>
        </router-link>
      </div>
           <div class="cell item qrcode">
         <router-link to="/my/price">
         <img src="../../../assets/img/bdewm.jpg" alt="">
          <p>绑定微信</p>
        </router-link>
      </div>
      </div>
    </div>

    <!-- <div class="user-indexPage-mod user-list">
      <h3 class="user-title">购物历史</h3>
      <div class="dataEmpty" v-if="hasMod">
        <i class="ico_fail"></i>
        <p>您还没有相关的购物历史哦~</p>
      </div>
      <ul class="" v-else>
        <li>
          <router-link to="" class="goA">
            <div class="hd">
              <img src="../../../assets/img/s201803130433355169.jpg">
            </div>
            <div class="bd">
                <p class="title">施耐德 Vigi iDPN附件 微型漏电模块附件</p>
                <p class="price"><em>¥109.70</em>起</p>
            </div>
          </router-link>
        </li>
      </ul>
    </div> -->
<!--
    <div class="user-indexPage-mod user-list user-favorite">
      <h3 class="user-title">我的收藏概览</h3>
      <div class="dataEmpty" v-if="hasCollect ">
        <i class="ico_fail"></i>
        <p>您还没有收藏哦~</p>
      </div>
      <ul class="" v-else>
        <li>
          <router-link to="">
            <div class="hd">
              <img src="../../../assets/img/s201803130433355169.jpg">
            </div>
            <div class="bd">
              <p class="title">RS Pro 万用表 电工测量</p>
              <p class="price"><em>¥询价</em></p>
            </div>
          </router-link>
        </li>
      </ul>
    </div> -->
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'rt-index',
  data () {
    return {
      hasMod: false,
      hasCollect: false,
      dqhourname: '',
      userName: localStorage.getItem('__username__')
    }
  },
  computed: {
    ...mapGetters(['phone'])
  },
  created () {
    console.log(this.userName)
    this.gethour()
  },
  watch: {
    $route (val) {
      console.log(val)
    }
  },
  methods: {
    ...mapMutations({
      setHasNav: 'app/SET_PAGE_HAS_NAV'
    }),
    gethour () {
      const now = new Date()
      const hour = now.getHours()
      if (hour < 12) {
        this.dqhourname = '上午好'
      } else {
        this.dqhourname = '下午好'
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.user_right {
  width: 950px;
  background: #fff;
  text-align: left;
  .bb1 {
    border-bottom: 1px solid #e6e6e6;
    .welcome {
      position:relative;
      width: 542px;
      height: 160px;
      padding: 36px 30px 0;
      .c4448f8 {
        color: #4448f8;
      }
      .fw {
        font-weight: bold;
        font-size: 18px;
        margin-top: 5px;
      }
      .line24 {
        line-height: 20px;
        color: #999;
      }
      .inteScore {
        transition: .2s;
        background: url(".~@/assets/img/inteScore.png") no-repeat center center;
        cursor: pointer;
        width: 218px;
        height: 127px;
        display: inline-block;
        position: absolute;
        top: 57.6px;
        left: 375px;
        .jihuoBtn {
          display: inline-block;
          background: #ffffff;
          color: #FE9983;
          font-weight: normal;
          font-size: 13px;
          text-shadow: none;
          padding: 5px 15px;
          margin-left: 27px;
          letter-spacing: 1px;
          transition: .15s;
          box-shadow: 0px 1px 5px #FA7659;
          cursor: pointer;
        }
        .jihuoBtn:hover {
          transform: translateY(-1.5px) scale(1.07);
        }
      }
      .inteScore:hover {
        transform: translateY(-1px) scale(1.02);
      }
    }
    .myServers {
      overflow: hidden;
      .role {
        height: 95px;
        box-sizing: border-box;
        padding: 18px 30px 0;
        border-bottom: 1px solid #e6e6e6;
        .title {
          float: left;
          width: 122px;
          font-size: 14px;
          color: #4448f8;
        }
        li {
          margin-bottom: 10px;
          color: #2b2b2b;
          em {
            color: #a5a5a5;
          }
        }
      }
      .role:last-child {
        border-bottom: 0;
      }
      .role-shangwu {
        i {
          display: inline-block;
          width: 27px;
          height: 29px;
          background: url('.~@/assets/img/bg_ico.png') no-repeat -328px 0;
          vertical-align: -6px;
          margin-right: 6px;
        }
      }
      .role-business i {
        display: inline-block;
        width: 27px;
        height: 29px;
        background: url('.~@/assets/img/bg_ico.png') no-repeat -328px -28px;
        vertical-align: -6px;
        margin-right: 6px;
      }
    }
  }
  .user-quickentry {
    border-bottom: 1px solid #eaeaea;
  }
  .user-indexPage-mod {
    padding: 40px 30px;
    border-bottom: 1px solid #e6e6e6;
    .user-title {
      height: 25px;
      line-height: 25px;
      font-size: 20px;
      color: #3b3b3b;
      padding: 0 15px;
      border-left: 6px solid #4448f8;
    }
    .list {
      padding: 30px 38px 0;
      overflow: hidden;
      .cell {
        flex: 1;
        width: 0;
        flex-basis: 0;
        max-width: 100%;
        display: block;
        position: relative;
        text-align: center;
        .icon {
          position: relative;
          display: inline-block;
          width: 80px;
          height: 80px;
          box-sizing: border-box;
          border: 3px solid transparent;
          border-radius: 100%;
          overflow: hidden;
        }
        p {
          font-size: 14px;
          color: #787b7c;
          margin-top: 10px;
        }
        .icon:after {
          position: absolute;
          left: 50%;
          top: 50%;
          margin: -24px -23px;
          content: '';
          display: inline-block;
          width: 47px;
          height: 49px;
        }
        .icon1 {
          background-color: #579eff;
        }
        .icon1:after {
          background: url('~@/assets/img/splis.png') no-repeat -82px -249px;
        }
        .icon2 {
          background-color: #39e3a1;
        }
        .icon2:after {
          background: url('~@/assets/img/splis.png') no-repeat -128px -249px;
        }
        .icon3 {
          background-color: #fac73e;
        }
        .icon3:after {
          background: url('~@/assets/img/splis.png') no-repeat -174px -249px;
        }
        .icon4 {
          background-color: #ff8071;
        }
        .icon4:after {
          background: url('~@/assets/img/splis.png') no-repeat -220px -249px;
        }
        .icon5 {
          background-color: #d6a7ff;
        }
        .icon5:after {
          background: url('.~@/assets/img/splis.png') no-repeat -264px -249px;
        }
      }
    }
    .flex {
      display: flex!important;
      flex-wrap: wrap;
      overflow: hidden;
      align-items: center;
    }
  }
  .user-list {
    .dataEmpty {
      text-align: center;
      height: 237px;
      padding: 50px 0 0;
      box-sizing: border-box;
      .ico_fail {
        background: url('.~@/assets/img/fail_ico.png') no-repeat 0 0;
        width: 60px;
        height: 63px;
        display: inline-block;
      }
      p {
        color: #999;
        margin-top: 20px;
        font-size: 14px;
      }
    }
    ul {
      overflow: hidden;
      margin-top: 28px;
      li {
        position: relative;
        float: left;
        width: 162px;
        height: 237px;
        margin-left: 20px;
        border: 1px solid #e6e6e6;
        box-sizing: border-box;
        .goA {
          display: block;
        }
        .hd {
          height: 160px;
          padding: 10px 0;
          box-sizing: border-box;
          text-align: center;
          img {
            max-width: 100%;
          }
        }
      }
      li:first-child {
       margin-left: 0;
      }
      li:hover {
        border-color: #4448f8;
        display: block;
      }
      li:before {
        position: absolute;
        content: '查看详情';
        width: 100%;
        line-height: 25px;
        left: 0;
        top: 0;
        color: #fff;
        background: red;
        text-align: center;
        background: rgba(68,72,248,.7);
        // visibility: hidden;
        // display: none;
      }
    }
  }
  .bd {
    position: relative;
    height: 74px;
    padding: 0 10px;
    box-sizing: border-box;
    .title {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      color: #232323;
      line-height: 18px;
      font-size: 14px;
    }
    .price {
      position: absolute;
      width: 100%;
      left: 0;
      box-sizing: border-box;
      padding: 0 10px;
      bottom: 5px;
      color: #9d9d9d;
      font-size: 14px;
      em {
        color: #e35a58;
        font-size: 20px;
        margin-right: 4px;
        font-weight: bold;
      }
    }
  }
  .user-favorite {
    ul {
      li {
        width: 200px;
        height: 250px;
        margin-left: 30px;
      }
      li:after {
        position: absolute;
        content: '';
        width: 12px;
        height: 12px;
        right: 9px;
        bottom: 14px;
        background: url('.~@/assets/img/bg_ico.png') no-repeat -317px -200px;
      }
      .hd {
        height: 165px;
      }
      .bd{
        position: relative;
        height: 83px;
        padding: 0 7px;
        box-sizing: border-box;
        .title {
          height: 47px;
          padding-top: 10px;
          border-bottom: 1px solid #e6e6e6;
          box-sizing: border-box;
        }
        .price {
          bottom: 5px;
          em {
            color: #e35a58;
            font-size: 20px;
            margin-right: 4px;
            font-weight: bold;
          }
        }
      }
    }

  }
  .fl {
    float: left;
    display: inline;
  }
  .clearfix {
    zoom: 1;
  }
  .clearfix:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
  }
  .c333 {
    color: #333;
  }
  .mt20 {
    margin-top: 20px;
  }
  .mt15 {
    margin-top: 15px;
  }
}

</style>
